export const Hero = () => {
  return <div className="relative bg-cover bg-center py-16 md:py-24" style={{
    backgroundImage: "url('https://images.unsplash.com/photo-1579684453423-f84349ef60b0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2000&q=80')",
    backgroundSize: 'cover',
    backgroundPosition: 'center'
  }}>
      <div className="absolute inset-0 bg-gradient-to-r from-[#0e4c92]/90 to-[#0e4c92]/50"></div>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
        <div className="lg:grid lg:grid-cols-12 lg:gap-8">
          <div className="lg:col-span-7">
            <h1 className="text-4xl font-extrabold tracking-tight text-white sm:text-5xl md:text-6xl">
              Your Trusted Guide to Home Health
            </h1>
            <p className="mt-6 text-xl text-gray-100">
              We personally test and review healthcare products so you can
              choose with confidence.
            </p>
            <div className="mt-8 flex flex-col sm:flex-row gap-4">
              <a href="/categories" className="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-[#ff8c7a] hover:bg-[#ff7c68] transition duration-150">
                Browse Categories
              </a>
              <a href="/buying-guides" className="inline-flex items-center justify-center px-6 py-3 border border-white text-base font-medium rounded-md text-white bg-transparent hover:bg-white/10 transition duration-150">
                Read Buying Guides
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>;
};